<template>
  <!-- 设备管理 -->
  <div id="management">
       <div class="radar">
         <div class="img">
            <img src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/radar1.png" alt="图片">
            <img src="https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/radar2.png" alt="图片">
         </div>
         <span>公示牌</span>
         <span>摄像头</span>
         <span>水利单位</span>
         <span>泵站</span>
         <span>闸口</span>
       </div>
       <div class="situation">
         <div class="title">
           设备情况
         </div>
         <div class="list">
           <ul>
             <li>
               <span></span>
               <span>正常</span>
               <span>异常</span>
             </li>
             
             <li>
                <span>泵站</span>
                <span>{{goodPumpNum}}</span>
                <span>{{errPumpNum}}</span>
             </li>
             <li>
                <span>闸口</span>
                <span>{{goodGateNum}}</span>
                <span>{{errGateNum}}</span>
             </li>
             <li>
                <span>公示牌</span>
                <span>{{goodSignsNum}}</span>
                <span>{{errSignsNum}}</span>
             </li>
             <li>
                <span>摄像头</span>
                <span>{{goodVedioNum}}</span>
                <span>{{errVedioNum}}</span>
             </li>
             <li>
                <span>水利单位</span>
                <span>{{goodWaterNum}}</span>
                <span>{{errWaterNum}}</span>
             </li>
           </ul>
         </div>
       </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'management',
  data () {
    return {
      goodSignsNum:0,//公示牌
      errSignsNum:0,
      goodVedioNum:0,//摄像头
      errVedioNum:0,
      goodWaterNum:0,//水利单位
      errWaterNum:0,
      goodPumpNum:0,//泵站
      errPumpNum:0,
      goodGateNum:0,//闸口
      errGateNum:0,
    }
  },
  created(){
      this.getData();
  },
  methods:{
      getData(){
        var that = this;
        axios.get("index.php?g=api&m=index&a=getDevice")
        .then(function(res){
          var data = res.data.content;
          that.goodSignsNum = data.gongshipai;
          that.goodVedioNum = data.shexiangtou
          that.goodWaterNum = data.shuili;
          that.goodPumpNum = data.bengzhan;
          that.goodGateNum = data.zhakou;
        })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #management{
        /* border:1px solid green; */
        width:464px;
        height:363px;
        display:flex;
        padding-top:80px;
        background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/manage.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    #management .radar{
      margin-top:20px;
      /* border:2px solid red; */
      width:270px;
      position: relative;
    }
    #management .radar .img{
      /* border:1px solid orange; */
      width:149px;
      height:148px;
      margin:0 auto;
      position:relative;
    }
    #management .radar .img img{
      width:100%;
      height:100%;
    }
    @keyframes run{
            from{
                transform:rotate(360deg);
            }
            to{
                transform:rotate(0deg);
            }
        }
    #management .radar .img img:last-child{
      position:absolute;
      z-index:999;
      top:0;
      left:0;
      animation:run 5s linear 2s infinite;
    }
    #management .radar span{
      color:#32C7FE;
      font-size:15px;
      position:absolute;
    }
    #management .radar span:nth-child(2){
      top:20px;
      right:20px;
    }
    #management .radar span:nth-child(3){
      top:10px;
      left:30px;
    }
    #management .radar span:nth-child(4){
      left:10px;
      top:120px;
    }
    #management .radar span:nth-child(5){
      top:130px;
      right:40px;
    }
    #management .radar span:nth-child(6){
      top:160px;
      right:120px;
    }
    #management .situation{
      width:176px;
      height:176px;
      /* border:2px solid red; */
    }
    .title{
      width:100%;
      font-size:12px;
      height:20px;
      line-height:20px;
      text-align: center;
      color:#32C7FE;
    }
    .list{
      width:100%;
      height:200px;
      /* border:2px solid red; */
      background-color:#060A3D;
      color:#32C7FE;
    }
    .list ul{
      width:100%;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
    .list ul li{
      width:100%;
      display: flex;
      justify-content: space-around;
    }
    .list ul li span{
      font-size:12px;
      text-align: center;
      width:33.333%;
    }
</style>